<template>
    <div class="w-full h-full">
        <div class="flex w-2/3 m-auto justify-center">
          <div >
            <span class="m-2">你的标签</span>
          </div>
          <div class="flex-1">
            <div>

          <el-select multiple v-model="tags" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
            <el-button @click="send" type="primary" class="m-2">提交</el-button>
            </div>

          </div>
        </div>
      <el-divider />
        <div >
          <div class="w-2/3 m-auto grid grid-cols-3 gap-3">
            <PeopleCard v-for="item in rec" :key="item.id" :pics="item.pics" :username="item.username" :ext="item.ext"></PeopleCard>
          </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import PeopleCard from "~/components/PeopleCard.vue";
import axios from 'axios'
let tags = ref(null)
let options = ref([
  {'value':'1','label':'有氧运动'},
  {'value':'2','label':'长跑'},
  {'value':'3','label':'瑜伽'},
  {'value':'4','label':'健身'}
])
let rec = ref([])


const getUserTags = ()=>{
  axios.post('http://localhost:8000/user_tag/get_one',{user_id:localStorage.getItem('user_id')}).then(res => {
    let data = res.data
    if(data.code===200){
      if(data.data){
        tags.value = data.data[0].tags
      }
    }
  })
}

onMounted(()=>{
  getUserTags()
  getRec()
})

const send = ()=>{
  let payload = {
    user_id: localStorage.getItem('user_id'),
    username: localStorage.getItem('username'),
    tags: tags.value
  }
  axios.post('http://localhost:8000/user_tag/get_one',{user_id:localStorage.getItem('user_id')}).then(res => {
    let data = res.data
    if(data.code===200){
      if(data.data.length>0){
        axios.post('http://localhost:8000/user_tag/update_one',{cond:{id:data.data[0].id},item:payload}).then(res => {
          let data = res.data
          if(data.code===200){
            ElMessage.success('提交成功')
            getRec()
          }
        })
      }else{
        axios.post('http://localhost:8000/user_tag/add_one',payload).then(res => {
          let data = res.data
          if(data.code===200){
            ElMessage.success('提交成功')
            getRec()
          }
        })
      }
    }
  })

}

const getRec = ()=>{
  let user_id = localStorage.getItem('user_id')
  axios.get('http://localhost:8000/user_tag/recommend?user_id='+user_id.toString()).then(res => {
    let data = res.data
    if(data.code===200){
      rec.value = data.data
    }
  })
}

</script> 
 
<style scoped></style>